<template>
  <view class="anniversariesList allColumnCenter">
    <header-title ref="headerTitle" isDisplayBack title="重要的日子" is-fixed background="#f5f5f5"
                  @getPageHeight="getPageHeight" zIndex="10">
      <template>
        <view class="anniversariesList_headerTitle">
          <text class="anniversariesList_headerTitle_text">张三的家庭</text>
        </view>
      </template>
    </header-title>
    <view :style="{height:`${headerHeight}px`}"></view>
    <view class="anniversariesList_content">
      <header-navigation-bar :headerList="headerList" :headerIndex="headerIndex" @selectIndex="selectHeaderIndex"
                             class="mt-25"></header-navigation-bar>
      <birthday-content v-if="headerIndex == 0" :bottomFlag="bottomFlag" :birthdayList="timeList.birthdayList"></birthday-content>
      <anniversary-content v-if="headerIndex == 1" :bottomFlag="bottomFlag"></anniversary-content>
      <solar-term-festival v-if="headerIndex == 2"></solar-term-festival>
    </view>
  </view>
</template>

<script>
import HeaderTitle from "../../components/shiqinComponents/pageComponents/headerTitle.vue";
import HeaderNavigationBar from "./components/headerNavigationBar.vue";
import BirthdayContent from "./components/birthdayContent.vue";
import AnniversaryContent from "./components/anniversaryContent.vue";
import SolarTermFestival from "./components/solarTermFestival.vue";
import {getCommemorationDay, getJournal, getSolarTerms} from "../../api/shiqinAPI";

export default {
  components: {SolarTermFestival, AnniversaryContent, BirthdayContent, HeaderNavigationBar, HeaderTitle},
  data() {
    return {
      // 头部高度
      headerHeight: 0,
      headerList: [
        {
          title: '生日'
        },
        {
          title: '纪念日'
        },
        {
          title: '节日节气'
        }
      ],
      // 选中的头部tarbar
      headerIndex: 0,
      // 浮窗按钮的配置
      bottomFlag: false,
      systemInfo: {},
      // 时间列表
      timeList:{
        birthdayList:{},
        anniversaryList:{},
        solarTermFestivalList:{}
      }
    };
  },
  computed:{
    family_id(){
      return this.$store.state.shiqinStore.selectedId
    }
  },
  async onLoad() {
    await this.getBirthdayList()
    await this.getAnniversaryList()
    await this.getSolarTermFestivalList()
  },
  onReady() {
    this.$nextTick(() => {
      this.systemInfo = uni.getSystemInfoSync()
      this.$refs.headerTitle.getPageHeight()
      this.getBottomButton()
    })
  },
  methods: {
    getBottomButton() {
      const query = uni.createSelectorQuery().in(this)
      query.select('.anniversariesList_content').boundingClientRect(data => {
        const rpx = this.systemInfo.windowWidth / 750
        this.bottomFlag = (this.headerHeight + data.top + data.height) > this.systemInfo.windowHeight - (200 * rpx)
      }).exec()
    },
    getPageHeight(number) {
      this.headerHeight = number
    },
    selectHeaderIndex(index) {
      this.headerIndex = index
    },
    // 获取生日列表
    getBirthdayList() {
      getJournal({
        type: 1,
        family_id:this.family_id
      }).then(res => {
        this.timeList.birthdayList = res.data.res
      })
    },
    // 获取纪念日列表
    getAnniversaryList() {
      getCommemorationDay({
        family_id:this.family_id,
        name:''
      }).then(res=>{
        this.timeList.anniversaryList = res.data.res
      })
    },
    // 获取节日节气列表
    getSolarTermFestivalList(){
      getSolarTerms().then(res=>{
        this.timeList.solarTermFestivalList = res.data.res
      })
    }
  },
}
</script>

<style lang="scss">
.anniversariesList {
  width: 750rpx;
  min-height: 100vh;
  background: $secondaryPages;
  overflow: hidden;

  .anniversariesList_headerTitle {
    position: absolute;
    bottom: -26rpx;
    left: 50%;
    transform: translateX(-50%);

    .anniversariesList_headerTitle_text {
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 20rpx;
      color: #A0A0A0;
    }
  }

  .anniversariesList_content {
    width: 702rpx;
  }
}
</style>
